<template>
  <view class="common pos-r forget">
    <view class="pos-a z-0 wp-100" :class="env === 'H5' ? 'bg-yel' : 'bg-lg'" :style="globalData.barStyle" />
    <u-navbar :fixed="false">
      <u-icon slot="left" name="arrow-left" :color="env === 'H5' ? '#fff' : '#000'" size="19" @tap="navigateBack" />
      <view slot="center" :class="[env === 'H5' ? 'c-fff' : 'c-bla']">忘记密码</view>
    </u-navbar>
    <view class="main">
      <view class="content bg-gry">
        <view class="h-a bg-whi">
          <view class="d-f pv-12 ph-24">
            <view class="title fs-30 lh-72 w-140">手机号</view>
            <u--input v-model="phone" placeholder="请输入手机号" border="false" class="wc-280" maxlength="11" />
          </view>
          <view class="bdb" />
          <view class="d-f pv-12 ph-24">
            <view class="c-666 fs-30 lh-72 w-140">验证码</view>
            <u--input v-model="verifyCode" placeholder="请输入验证码" border="false" class="wc-280" maxlength="6" />
            <view class="c-yel fs-28 lh-72 w-160" :class="{ grayLabel: countdown > 0 }" @click="sendCode">{{ verifyLabel }}</view>
          </view>
          <view class="bdb" />
          <view class="d-f pv-12 ph-24">
            <view class="c-666 fs-30 lh-72 w-140">设置密码</view>
            <u--input v-model="password" placeholder="请设置6-20位密码，包含字母和数字" border="false" maxlength="20" class="wc-280" type="password" />
          </view>
          <view class="bdb" />
          <view class="d-f pv-12 ph-24">
            <view class="c-666 fs-30 lh-72 w-140">确认密码</view>
            <u--input v-model="passwordAgain" placeholder="需跟前面密码一致" border="false" class="wc-280" maxlength="15" type="password" />
          </view>
        </view>
      </view>
      <view class="footer">
        <u-button type="primary" text="确认" @tap="commit" shape="circle" color="#FEA20D" :throttleTime="2000" />
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
export default {
  mixins: [commonMxins],
  data() {
    return {
      countdown: 0, // 倒计时秒数
      timer: null, // 定时器对象
      totalTime: 60, // 总倒计时时间
      phone: '',
      verifyCode: '',
      password: '',
      passwordAgain: ''
    };
  },
  computed: {
    verifyLabel() {
      return this.countdown > 0 ? `${this.countdown} 秒后重发` : '发送验证码';
    }
  },
  methods: {
    async sendCode() {
      let reg = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[567]()|7[0-8]|8[0-9]|9[0-9])\d{8}$/;
      if (!reg.test(this.phone)) {
        uni.showToast({ title: '请输入正确手机号', icon: 'none', duration: 2000 });
        return;
      }
      if (this.countdown > 0) return;
      let res = await this.$request({ url: '/app/verifyCode/send', data: { phoneNumber: this.phone } });
      if (res.code === 200) {
        this.verifyCode = res.msg;
        this.countdown = this.totalTime;
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      } else {
        uni.showToast({ title: res.msg, icon: 'none', duration: 2000 });
      }
    },
    async commit() {
      if (!this.phone || !this.password || !this.passwordAgain || !this.verifyCode) {
        uni.showToast({ title: '信息不能为空', icon: 'none', duration: 3000 });
        return;
      }

      if (this.password.length < 6 || this.password.length > 20) {
        uni.showToast({ title: '密码长度应为6-20位', icon: 'none', duration: 3000 });
        return;
      }

      // 密码强度校验
      const hasLetter = /[a-zA-Z]/.test(this.password);
      const hasNumber = /\d/.test(this.password);
      if (!hasLetter || !hasNumber) {
        uni.showToast({ title: '密码需包含字母和数字', icon: 'none', duration: 3000 });
        return;
      }

      if (this.passwordAgain !== this.password) {
        uni.showToast({ title: '两次密码不一致', icon: 'none', duration: 3000 });
        return;
      }
      let data = { phoneNumber: this.phone, verifyCode: this.verifyCode, newPassword: this.password };
      let res = await this.$request({ url: '/app/appUser/resetPassword', data });
      if (res.code == 200) {
        uni.showToast({ title: '密码修改成功', icon: 'success', duration: 3000 });
        let timer = setTimeout(() => {
          clearTimeout(timer);
          uni.removeStorageSync('ACCESS_TOKEN');
          uni.reLaunch({ url: '/pages/global/login/login' });
        }, 3000);
      } else {
        uni.showToast({ title: '密码修改失败', icon: 'error', duration: 3000 });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.forget {
  .main {
    .content {
      height: calc(100% - 67px);
      .grayLabel {
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>
